<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
      .wrap{
        width: 80%;
        margin: 20px auto;
      }
      span{
        border: 1px solid black;
      }
  </style>
</head>
<body>
  <div class="wrap">
    <input type="text" id="veri">
    <canvas id="mycanvas" width="200" height="60" style="background: skyblue;"></canvas>
    <button id="checkCode">验证</button>
</div>

<script>
  // 显示验证码的span
  var codeEle=document.getElementById("codeEle");
    // 生成验证码函数
    var code=""//验证码
      function makeCode(){ 
           code=""//每次重新生成验证码 清空以前的验证码
          var str="abcdefghigklmn123456789ABCDEFGHIGKLMN"; //37
          for(var i=0;i<4;i++){
            // 随机下标
            var index=Math.floor(Math.random()*str.length);
            code+=str[index]//把每次随机到的字符串 加到code上
          }
          // 把生成的验证码 用canvas 去绘制
          draw(code) //绘制验证码方法
      } 
      
      makeCode()//生成验证码
      
      
      //把生成的验证码 绘制成canvans********************************************

      function ranDomColor(){//生成随机色的函数
          return  "#"+Math.floor(Math.random()*0xffffff).toString(16)
      }
      //随机位置的函数
      function ranDomPos(a,b){ //a-b之间的随机数
        return Math.floor(Math.random()*(b-a)+a); 
      }

      function draw(code){ //code 用canvas去绘制 
        var mycanvas=document.getElementById("mycanvas");
         var c=mycanvas.getContext("2d");
         console.log(code)
        c.clearRect(0,0,200,60)//清空画布
        //  每个验证码大小随机  
        // 每个验证码 位置随机
        // 每个验证码颜色随机
        // 如 code="ABHK"
        for(var i=0;i<4;i++){ //循环画文字
          // 字体大小 15 40 
          c.font=`${ranDomPos(15,40)}px 黑体`;
          c.fillStyle=ranDomColor();//每个文字设置随机颜色
          // 绘制每个验证码   随机x轴    随机y轴位置
          c.fillText(code[i],40*i+ranDomPos(3,30),30+ranDomPos(5,20))
        }
        // 随机位置  随机长度的干扰线-------------------------
        for(var j=0;j<10;j++){
          c.beginPath(); //重新绘制
              // ，每条线 随机颜色
          c.strokeStyle= ranDomColor(); 
          // 开始坐标      x轴    y轴
          c.moveTo(ranDomPos(0,200),ranDomPos(0,60))
          // 结束位置
          c.lineTo(ranDomPos(0,200),ranDomPos(0,60))
          c.stroke();
        }
        // 绘制干扰点
        for(var k=0;k<30;k++){
          c.beginPath(); //重新绘制
              // ，每条线 随机颜色
          c.strokeStyle= ranDomColor(); 
          // 开始坐标      x轴    y轴
          var x=ranDomPos(0,200);
          var y=ranDomPos(0,60);
          c.moveTo(x,y)
          // 结束位置
          c.lineTo(x+2,y+2)
          c.stroke();
        }

      }
      // **********************************

      // -----------------------------------------------------------
      var mycanvas=document.getElementById("mycanvas");
      // 点击canvas切换验证码
      mycanvas.onclick=function(){
        // 从新调用函数生成验证码 
        makeCode()
      }


      // -----------------------------------------------------------
      //  点击验证判断输入的验证码 和生产的验证码 是否相等
      var checkCode=document.getElementById("checkCode");
      // 输入验证码的输入框
      var veri=document.getElementById("veri");
      checkCode.onclick=function(){
          if(veri.value==code){ //输入的验证码和显示的验证码对比
              alert("验证码正确")
          }else{
            alert("验证码错误")
          }
      }
      // 周末作业
      // 本周知识点  手写一遍（不用写案例代码  写知识点）
      // 今日课堂代码 敲一遍
      // 俩套localStorage习题
      
</script>
</body>
</html>